<template>
  <div>
    <FormCreater :config=formConfig>
      <!--获取返回值-->
      <template #default="row">
        <div>
          {{row}}
        </div>
      </template>
    </FormCreater>
    <FormCreater :config=formConfig ref="form">
      <el-button type="primary" @click="submit1">自定义提交</el-button>
    </FormCreater>
    <FormCreater :config = formConfig  @submit="submit2">
     </FormCreater>
  </div>
</template>

<script>
import FormCreater from '@/components/FormCreater.jsx'

export default {
  name: "Form",
  components: {
    FormCreater
  }, data: () => {
    return {
      formConfig: {
        title: '第一个表单示例',
        items: [
          [
            {label: '用户名', key: 'username', value: 'apple', type: 'text'},
            {label: '密码', key: 'password', value: 'apple', type: 'password'},
          ],
          [
            {
              label: '性别', key: 'sex', value: '1', type: 'select', options: [
                {label: '男', value: '1'},
                {label: '女', value: '0'}
              ]
            },
          ]
        ]
      }
    }
  },
  methods:{
    submit2(data){
      console.log(data);
    },
    submit1(){
      let form = this.$refs.form.getFormData();
      console.log(form);
    }
  }
}
</script>

<style scoped>

</style>
<!--
FormCreater:
{
    title:'表单标题'
}
-->
